<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="purchasingListUpdateForm" :model="purchasingListUpdateFormData" :rules="rules" size="mini"
        label-width="100px" >
        <el-col :span="12">
          <el-form-item label="采购清单ID" prop="purchasingListId">
            <el-input v-model="purchasingListUpdateFormData.purchasingListId" placeholder="请输入采购清单ID" readonly
              :disabled='true' clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同" prop="contractId">
            <el-select v-model="purchasingListUpdateFormData.contractId" placeholder="请选择合同" :disabled='true'
              filterable :style="{width: '100%'}">
              <el-option v-for="(item, index) in contractIdOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否已付款" prop="paid">
            <el-select v-model="purchasingListUpdateFormData.paid" placeholder="请选择是否已付款"
              :style="{width: '100%'}" :disabled="true">
              <el-option v-for="(item, index) in paidOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="清单名" prop="purchasingListName">
            <el-input v-model="purchasingListUpdateFormData.purchasingListName" placeholder="请输入清单名"
              :maxlength="20" show-word-limit clearable :style="{width: '100%'}"
              :disabled="purchasingListUpdateFormData.paid == 1"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总金额" prop="purchasingListTotalCost">
            <el-input v-model="purchasingListUpdateFormData.purchasingListTotalCost" placeholder="请输入总金额"
              readonly :disabled='true' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" :disabled="purchasingListUpdateFormData.paid == 1">更改</el-button>
            <el-button type="success" @click="changPurchasingListPaidStatus" v-if="purchasingListUpdateFormData.paid == 0">付款</el-button>
            <el-button type="primary" @click="showAddressForm = true" v-if="purchasingListUpdateFormData.paid == 1 && purchasingListUpdateFormData.executed == 0">生成发货单</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 发货地址输入框 -->
    <el-dialog
			title="输入发货地址"
			:visible.sync="showAddressForm"
			width="30%"
      append-to-body>
			
      <el-form :model="purchasingListUpdateFormData" :rules="rules" size="mini"
        label-width="100px">
        <el-col :span="24">
          <el-form-item label="发货地址" prop="purchasingListName">
            <el-input v-model="purchasingListUpdateFormData.address" placeholder="请输入发货地址" :maxlength="100"
              show-word-limit :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>  

			<span slot="footer" class="dialog-footer">
				<el-button @click="showAddressForm = false">取 消</el-button>
				<el-button type="primary" @click="generateDispatchList">确 定</el-button>
			</span>
		</el-dialog>

     <el-table
      :data="goodsListData"
      style="width: 100%">
      <el-table-column label="商品id">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.goodsId }}</span>
          </template>
      </el-table-column>
      <el-table-column label="商品名">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
          </template>
      </el-table-column>
      <el-table-column label="商品单价">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.goodsValue }}</span>
          </template>
      </el-table-column>
      <el-table-column label="商品数量">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.goodsNumber }}</span>
          </template>
      </el-table-column>
      <el-table-column label="总金额">
          <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.goodsTotalCost }}</span>
          </template>
      </el-table-column>
      <el-table-column label="操作" v-if="purchasingListUpdateFormData.paid != 1">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger">
                        <span @click="handleDeleteFromPurchasingList(scope.$index, scope.row)">删除</span>
                    </el-button>
                </template>
            </el-table-column>
		</el-table>
  </div>
  
</template>
<script>
import {purchasingListGenerateDispatchList,purchasingListUpdate, purchasingListGetGoods,purchasingListChangePaidStatus,deleteGoodsFromPurchasingList} from '@/api/sale'
export default {
  components: {},
  props: ['purchasingListUpdateData', 'goodsList'],
  data() {
    return {
      showAddressForm: false,
      purchasingListUpdateFormData: {
        purchasingListId: undefined,
        contractId: undefined,
        paid: 0,
        purchasingListName: undefined,
        purchasingListTotalCost: undefined,
        address: undefined
      },
      rules: {
        purchasingListId: [{
          required: true,
          message: '请输入采购清单ID',
          trigger: 'blur'
        }],
        contractId: [{
          required: true,
          message: '请选择合同',
          trigger: 'change'
        }],
        paid: [{
          required: true,
          message: '请选择是否已付款',
          trigger: 'change'
        }],
        purchasingListName: [{
          required: true,
          message: '请输入清单名',
          trigger: 'blur'
        }],
        purchasingListTotalCost: [{
          required: true,
          message: '请输入总金额',
          trigger: 'blur'
        }],
      },
      contractIdOptions: [{
        "label": "合同1",
        "value": 1
      }, {
        "label": "合同2",
        "value": 2
      }],
      paidOptions: [{
        "label": "未付款",
        "value": 0
      }, {
        "label": "已付款",
        "value": 1
      }],
      goodsListData: []
    }
  },
  computed: {},
  watch: {
    purchasingListUpdateData: function(n, o){
      this.purchasingListUpdateFormData = n
      this.getGoodsList()
    }
  },
  created() {
    this.purchasingListUpdateFormData = this.purchasingListUpdateData
    this.getGoodsList()
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['purchasingListUpdateForm'].validate(valid => {
        if (!valid) return
        purchasingListUpdate(this.purchasingListUpdateFormData)
      })
    },
    resetForm() {
      this.$refs['purchasingListUpdateForm'].resetFields()
    },
    // 获取采购清单所含有商品列表
    getGoodsList(){
      purchasingListGetGoods({purchasingListId: this.purchasingListUpdateFormData.purchasingListId}).then(res => {
        console.log(res);
        this.goodsListData = res.data.goodsList
      })
    },
    // 更改采购清单为已付款状态
    changPurchasingListPaidStatus(){
      purchasingListChangePaidStatus({purchasingListId: this.purchasingListUpdateFormData.purchasingListId})
    },
    // 删除采购清单商品
    handleDeleteFromPurchasingList(index, row){
      deleteGoodsFromPurchasingList({
        contractId: this.purchasingListUpdateFormData.contractId,
        purchasingListId: this.purchasingListUpdateFormData.purchasingListId,
        goodsId: row.goodsId
      }).then(res => {
        this.getGoodsList()
      })
    },
    // 生成发货单
    generateDispatchList(){
      purchasingListGenerateDispatchList(
        {
          purchasingListId: this.purchasingListUpdateFormData.purchasingListId,
          address: this.purchasingListUpdateFormData.address  
        }
      ).then(res => {
        this.showAddressForm = false
      })
    },
  }
}

</script>
<style>
</style>
